<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bind</title>
</head>
<body>
    <button>xiasnn</button>
    <script>
        let lisi = {
            name : '李四'
        };
        function User(){
            console.log(this.name);
        };
        // bind不会立即执行，会得到一个新的函数
        // User.bind(lisi)();
        let fuc = User.bind(lisi);
        fuc();



        // bind有两个时机可以传参
        let wangwu = {name : '王五'};
        function Student(age,score){
            console.log(`姓名：${this.name},年龄：${age},成绩：${score}`);
        };
        // 第一处：bind后面的参数
        let student1 = Student.bind(wangwu,17,99);
        student1();

        // 第二处：执行的时候传参
        let student2 = Student.bind(wangwu);
        student2(18,98);

        //  如果两处都传了，先取bind后面的参数，若bind后面的参数不够，执行的时候传参垒在后面
        let student3 = Student.bind(wangwu,19,100);
        student3(14,77);

        let student4 = Student.bind(wangwu,16);
        student4(15,88);


        // addEventListener不是立即执行函数，就适合用bind
        document.querySelector('button').addEventListener('click',function(event) {
            document.write(`${event.target.innerHTML}${this.title}`);
        }.bind({title : "要爱自己"}));
    </script>
</body>
</html>